<template>
  <div>
    <mybutton-2 :msg="'sousuo'" @click="search"></mybutton-2>
    <button @click="$refs.mmyy.visible = true">添加</button>
    <mybutton ref="mmyy" @click="addpush"></mybutton>

    <mybutton-1 ref="mm" @click="editItem"></mybutton-1>
    <div class="row">
      <span class="item">文章ID</span>
      <span class="item">文章标题</span>
      <span class="item">文章标签</span>
      <span class="item">作者</span>
      <span class="item">操作</span>
    </div>
    <div v-for="(item, index) in articleList" :key="index" class="row">
      <span class="item">{{ item.id }}</span>
      <span class="item">{{ item.title }}</span>
      <span class="item">{{ item.label }}</span>
      <span class="item">{{ item.author }}</span>
      <span class="item">
        <button @click="($refs.mm.visible = true), showEditDialog(index)">
          编辑
        </button>
        <button @confirm="editItem" style="background: red" type="danger">
          删除
        </button>
      </span>
    </div>
  </div>
</template>

<script>
import mybutton from "./v.vue";
import mybutton1 from "./v1.vue";
import mybutton2 from "./v2.vue";

export default {
  components: {
    mybutton,
    mybutton1,
    mybutton2,
  },
  data() {
    return {
      searchMsg: "",
      editIndex: 0,
      allChecked: false,
      articleList: [
        {
          id: "001",
          title: "习近平谈治国理政",
          label: "政治",
          author: "习近平",
          checked: false,
        },
        {
          id: "002",
          title: "明朝那些事儿",
          label: "历史",
          author: "当年明月",
          checked: false,
        },
        {
          id: "003",
          title: "Vue.x",
          label: "计算机",
          author: "尤雨溪",
          checked: false,
        },
      ],
      articleList2: [
        {
          id: "001",
          title: "习近平谈治国理政",
          label: "政治",
          author: "习近平",
          checked: false,
        },
        {
          id: "002",
          title: "明朝那些事儿",
          label: "历史",
          author: "当年明月",
          checked: false,
        },
        {
          id: "003",
          title: "Vue.x",
          label: "计算机",
          author: "尤雨溪",
          checked: false,
        },
      ],
    };
  },
  methods: {
    search(data) {
      this.searchMsg = data;
      if (this.searchMsg) {
        this.articleList = this.articleList2.filter((item) => {
          return item.title === this.searchMsg;
        });
      } else {
        this.articleList = this.articleList2;
      }
    },
    addpush(item) {
      this.articleList.push(item);
    },
    del(index) {
      this.articleList.splice(index, 1);
    },
    addArticle() {
      this.articleList.push;
    },
    showEditDialog(index) {
      this.editIndex = index;
      this.$refs.editDialog.show(this.articleList[index]);
    },
    editItem(data) {
      for (let key in data) {
        this.articleList[this.editIndex][key] = data[key];
      }
    },
  },
};
</script>

<style scoped>
.row {
  display: flex;
  text-align: center;
  /* width: 1000px; */
  background: #ccc;
}

.item {
  height: 50px;
  line-height: 50px;
  flex: 1;
}

.title {
  display: flex;
  background: #f2f2f2;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
}
.container {
  display: flex;
  background: white;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
}
</style>